<template lang="">
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
hljs.configure({ // optionally configure hljs
  languages: ['javascript', 'ruby', 'python']
})
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线

  [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
  ['blockquote'], // 引用，代码块
  ['code-block', 'image', 'link'] // 上传图片、上传视频
]
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      content: this.value,
      editorOption: { //  富文本编辑器配置
        modules: {
          toolbar: {
            container: toolbarOptions // 工具栏
          },
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        },
        placeholder: '请输入正文...'
      }
    }
  },
  watch: {
    value(newvalue) {
      this.content = newvalue
    }
  },
  methods: {
    onEditorReady(editor) {}, // 准备编辑器
    onEditorBlur() {
      this.$emit('input', this.content)
      this.$emit('blur')
    }, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {
      this.$emit('input', this.content)
    }
  }
}
</script>
<style>

</style>
